<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
        </div>
        <div class="title">员工新资表</div>
        <div
          class="head head1"
          :style="'width:' + 130 * (list1.length + list2.length + 6) + 'px'"
        >
          <p
            v-if="details.position"
            :style="
              'width:' + (130 * (list1.length + list2.length + 6)) / 2 + 'px'
            "
          >
            岗位： {{ details.position.title }}
          </p>
          <p
          v-if="details.staff"
            :style="
              'width:' + (130 * (list1.length + list2.length + 6)) / 2 + 'px'
            "
          >
            姓名：{{ details.staff.name }}
          </p>
        </div>
        <div
          class="head"
          :style="'width:' + 130 * (list1.length + list2.length + 6) + 'px'"
        >
          <p v-if="details.date" style="width: 130px">{{ details.date[0] }}年</p>
          <p :style="'width:' + 130 * (list1.length + 1) + 'px'">应发</p>
          <p :style="'width:' + 130 * (list2.length + 1) + 'px'">扣款</p>
          <p :style="'width:' + 130 * 3 + 'px'">确认</p>
        </div>
        <div class="headWrap headWrap1">
          <div class="box1 box">
            <p>月份/项目</p>
          </div>
          <div class="box2 box">
            <p v-for="(ele, index) in list1" :key="index">
              {{ ele.title | salary_status }}
            </p>
            <p>应发合计</p>
          </div>
          <div class="box3 box">
            <p v-for="(ele, index) in list2" :key="index">
              {{ ele.title | deductMoney_status }}
            </p>
            <p>扣款合计</p>
          </div>
          <div class="box4 box">
            <p>实发工资</p>
            <p>签领时间</p>
            <p>备注</p>
          </div>
        </div>
        <div class="headWrap headWrap2">
          <div class="box1 box" v-if="details.date">
            <p>{{ details.date[1] }}月</p>
          </div>
          <div class="box2 box">
            <p v-for="(ele, index) in list1" :key="index">
              {{ ele.money }}
            </p>
            <!-- <p>固定加班费</p>
            <p>绩效工资</p>
            <p>全勤奖</p>
            <p>敬业奖</p>
            <p>其他收入</p>
            <p>提成</p> -->
            <p>{{ Number(details.total_payable).toFixed(2) }}</p>
          </div>
          <div class="box3 box">
            <p v-for="(ele, index) in list2" :key="index">
              {{ ele.money }}
            </p>
            <p>{{ Number(details.total_deduction).toFixed(2) }}</p>
          </div>
          <div class="box4 box">
            <p>{{ Number(details.net_salary).toFixed(2) }}</p>
            <p>{{ dete }}</p>
            <p class="remark">{{ details.remark }}</p>
          </div>
        </div>
        <div class="remarkWrap">
          <p style="width: 50px">备注:</p>
          <div>
            <p>1.以上均以人民币为结算币种，以“元”为单位</p>
            <p>
              2.工资签领人在领取工资时应认真核对本工资表，若对工资表确认无误的请在“签名确认”栏签字确认，若对工资的数额已构成等有异议的，应及时向公司书面提出.
            </p>
          </div>
        </div>
        <p class="tags">
          本人再此确认对本月加班时数及加班工资及扣发的所有款项无任何异议，并以全数领取公司应发工资.
        </p>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      list1: [],
      list2: [],
      details: {},
      dete: "",
      isExport: false,
      paging: {
        id: "",
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.paging.id = this.id;
      this.getDetails();
      // 获取当前时间
      var myDate = new Date();
      this.dete = this.utils.getNowDate(myDate, true);
    }
  },
  filters: {
    salary_status(val) {
      switch (val) {
        case "1":
          val = "基本工资";
          break;
        case "2":
          val = "固定加班费";
          break;
        case "3":
          val = "绩效工资";
          break;
        case "4":
          val = "全勤奖";
          break;
        case "5":
          val = "敬业奖";
          break;
        case "6":
          val = "其他收入";
          break;
        case "7":
          val = "提成";
          break;
        case "14":
          val = "补贴";
          break;
      }
      return val;
    },
    deductMoney_status(val) {
      switch (val) {
        case "8":
          val = "个人社保";
          break;
        case "9":
          val = "个人公积金";
          break;
        case "10":
          val = "个人所得税";
          break;
        case "11":
          val = "考勤";
          break;
        case "12":
          val = "其他";
          break;
        case "13":
          val = "预支工资";
          break;
      }
      return val;
    },
  },
  methods: {
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportStaffSalary(this.paging);
      this.utils.downloadXlsx(res, "员工薪资单");
      this.isExport = false;
    },
    async getDetails() {
      let { code, data } = await this.$Http.getSalary({ id: this.id });
      let arr = data.salaryCate?data.salaryCate.cate.split(","):[];
      data.date = data.date?data.date.split("-"):[];
      this.details = data;
      console.log(data,'this.details');
      let list1 = [];
      let list2 = [];
      let obj;
      data.total_payable =
        data.base_wage * 1 +
        data.float_wage * 1 +
        data.merit_wage * 1 +
        data.full_wage * 1 +
        data.loyal_wage * 1 +
        data.other_wage * 1 +
        data.subsidy_wage * 1 +
        data.royalty_wage * 1;
      data.total_deduction =
        data.advance_deduction * 1 +
        data.full_deduction * 1 +
        data.other_deduction * 1 +
        data.social_deduction * 1 +
        data.fund_deduction * 1 +
        data.income_deduction * 1;
      data.net_salary = data.total_payable - data.total_deduction;
      arr.forEach((ele) => {
        if (ele <= 7 || ele == 14) {
          if (ele == 1) {
            obj = {
              title: "基本工资",
              money: data.base_wage,
            };
          } else if (ele == 2) {
            obj = {
              title: "固定加班费",
              money: data.merit_wage,
            };
          } else if (ele == 3) {
            obj = {
              title: "绩效工资",
              money: data.float_wage,
            };
          } else if (ele == 4) {
            obj = {
              title: "全勤奖",
              money: data.full_wage,
            };
          } else if (ele == 5) {
            obj = {
              title: "敬业奖",
              money: data.loyal_wage,
            };
          } else if (ele == 14) {
            obj = {
              title: "补贴",
              money: data.subsidy_wage,
            };
          } else if (ele == 6) {
            obj = {
              title: "其他收入",
              money: data.other_wage,
            };
          } else if (ele == 7) {
            obj = {
              title: "提成",
              money: data.royalty_wage,
            };
          }
          list1.push(obj);
        } else {
          if (ele == 8) {
            obj = {
              title: "个人社保",
              money: data.social_deduction,
            };
          } else if (ele == 9) {
            obj = {
              title: "个人公积金",
              money: data.fund_deduction,
            };
          } else if (ele == 10) {
            obj = {
              title: "个人所得税",
              money: data.income_deduction,
            };
          } else if (ele == 11) {
            obj = {
              title: "考勤",
              money: data.full_deduction,
            };
          } else if (ele == 12) {
            obj = {
              title: "其他",
              money: data.other_deduction,
            };
          } else if (ele == 13) {
            obj = {
              title: "预支工资",
              money: data.advance_deduction,
            };
          }
          list2.push(obj);
        }
      });
      this.list1 = list1;
      this.list2 = list2;
      console.log(list1, "list1", list2);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  section {
    .head {
      width: 100%;
      overflow: hidden;
      overflow-x: scroll;
      p {
        margin: 0;
        padding: 10px 0;
        font-size: 14px;
        width: 130px;
        text-align: center;
        border-top: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
      }
      p:last-child {
        border-right: 1px solid transparent;
      }
    }
    .head1 {
      p {
        text-align: left;
        padding-left: 20px;
      }
    }
    .head::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
    }
    .contentBox {
      margin-right: 24px;
      background: #fff;
      border-radius: 8px;
      padding: 30px 24px 20px 24px;
      width: 100%;
      overflow: hidden;
      overflow-x: scroll;
      .title {
        font-size: #000;
        font-size: 20px;
        margin: 26px 0;
      }
      .head {
        width: 100%;
        display: flex;
      }
      .remarkWrap {
        width: 100%;
        display: flex;
      }
      .headWrap1 {
        color: #000;
      }
      .headWrap {
        display: flex;
        justify-content: space-between;
        .box {
          display: flex;
          p {
            margin: 0;
            padding: 10px 0;
            font-size: 14px;
            width: 130px;
            text-align: center;
            border-top: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
          }
          p:last-child {
            border-right: 1px solid transparent;
          }
        }
      }
      .headWrap2 {
        .box {
          p {
            border-bottom: 1px solid #ebeef5;
          }
        }
      }
      .headWrap2 {
        .box3 {
          color: #f00;
        }
      }
    }
  }
}
.remark {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>